@{
    ViewData["Title"] = "装箱管理";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>装箱管理</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .search-container {
            background: #fff;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .table-container {
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .search-form .layui-form-item {
            margin-bottom: 15px;
        }
        .toolbar {
            padding: 15px;
            border-bottom: 1px solid #e6e6e6;
        }
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .status-tag {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            display: inline-block;
        }
        .status-0 { background: #ccc; }     /* 草稿 */
        .status-1 { background: #f39c12; }  /* 已确认 */
        .status-2 { background: #27ae60; }  /* 已完成 */
        .status-3 { background: #e74c3c; }  /* 已取消 */
    </style>
</head>
<body>
    <div class="layui-container-fluid">
        <!-- 搜索条件区域 -->
        <div class="search-container">
            <form class="layui-form search-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">装箱单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="packingCode" placeholder="请输入装箱单编号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">销售订单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="saleOrderCode" placeholder="请输入销售订单编号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">发票编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="invoiceCode" placeholder="请输入发票编号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="customerCode" placeholder="请输入客户编码" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="customerName" placeholder="请输入客户名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">检查员</label>
                            <div class="layui-input-block">
                                <input type="text" name="inspector" placeholder="请输入检查员" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <select name="state">
                                    <option value="">全部状态</option>
                                    <option value="0">草稿</option>
                                    <option value="1">已确认</option>
                                    <option value="2">已完成</option>
                                    <option value="3">已取消</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">装箱日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="packingDateRange" id="packingDateRange" placeholder="选择日期范围" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12" style="text-align: right;">
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn" lay-submit lay-filter="searchForm">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">
                                <i class="layui-icon layui-icon-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="layui-btn-group">
                    <a href="/Packing/Create" class="layui-btn layui-btn-sm" id="addBtn">
                        <i class="layui-icon layui-icon-add-1"></i> 新增
                    </a>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" id="batchDeleteBtn" style="display: none;">
                        <i class="layui-icon layui-icon-delete"></i> 批量删除
                    </button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i> 编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </a>
    </script>

    <script src="~/Scripts/Packing/packingManagement.js"></script>
</body>
</html> 